<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>City Night</title>
		<link rel="shortcut icon" href="assets/images/favicon.png">

		<link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="plugins/slick/slick.css" rel="stylesheet">
		<link href="plugins/slick-nav/slicknav.css" rel="stylesheet">
		<link href="plugins/wow/animate.css" rel="stylesheet">
		<link href="assets/css/bootstrap.css" rel="stylesheet">
		<link href="assets/css/theme.css" rel="stylesheet">

	</head>
	<body class="">
	<div id="app">
		<div id="page-loader">
			<div class="loaders">
				<img src="assets/images/loader/3.gif" alt="First Loader">
				<img src="assets/images/loader/4.gif" alt="First Loader">
			</div>
		</div>
		<header id="site-header">
			<div id="site-header-top">
				<div class="container">
					<div class="row">
						<div class="col-md-5">
							<div class="clearfix">
								<button class="btn btn-warning btn-lg header-btn visible-sm pull-right">List your
									Property for Free</button>
								<p class="timing-in-header">Open Hours: Monday to Saturday - 8am to 6pm</p>
							</div>
						</div>
						<div class="col-md-7">
							<div class="clearfix"  v-if="!checkLogin">
								<a class="btn btn-warning btn-lg header-btn hidden-sm"
									href="/user/login.html">点此登录</a>
							</div>
							<div class="clearfix"  v-else>
								<a class="btn  btn-lg header-btn"
									href="javascript:void(0)" @Click="out()">退出</a>
								<a class="btn  btn-lg header-btn"
									href="/user/user.html" >个人中心</a>
								<a class="btn btn-warning btn-lg header-btn hidden-sm"
									href="/user/user.html">欢迎：{{user.nickName}}</a>			
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<figure id="site-logo">
							<a href="index.html"><img src="assets/images/logo.png" alt="Logo"></a>
						</figure>
					</div>
					<div class="col-md-6 col-sm-8">
						<nav id="site-nav" class="nav navbar-default">
							<ul class="nav navbar-nav">
								<li><a href="index.html">主页</a></li>
								<li><a href="property-listing.html">查询</a></li>
								<li><a href="gallery.html">展示</a></li>
								<li><a href="contact.html">反馈</a></li>
							</ul>
						</nav>
					</div>
					<div class="col-md-3 col-sm-4">
						<div class="contact-in-header clearfix">
							<i class="fa fa-mobile"></i>
							<span>
								联系我们
								<br>
								<strong>111 222 333 444</strong>
							</span>
						</div>
					</div>
				</div>
			</div>
		</header>
		<div id="site-banner" class="text-center clearfix">
			<div class="container">
				<h1 class="title">Gallery</h1>
				<ol class="breadcrumb">
					<li><a href="index.html">Home</a></li>
					<li class="active">Gallery</li>
				</ol>
			</div>
		</div>
		<div id="blog-listing" class="grid-style">
			<header class="section-header text-center">
				<div class="container">
					<div class="controls text-center pull-left" data-wow-duration="1s">
						<span class="control active" data-filter="all">全住房展示</span>
					</div>
					<div class="pull-right">
						<p class="pull-left layout-view"> View as: 
						<i class="fa fa-th" data-layout="4" onClick="views(4)"></i> 
						<i class="fa fa-th-large" data-layout="6" onClick="views(6)"></i></p>
					</div>
				</div>
			</header>
			<div class="container">
				<div class="row">
					<div >
						<div  class='col-md-4 col-sm-6 layout-item-wrap mix a1'  v-for="room in rooms">
							<article class="gallery-item property layout-item clearfix wow slideInUp">
								<a class="clearfix zoom" :href="'single-property.html?' + room.rno + '&' + room.tno">
								<img data-action="zoom" :src="room.pics" style="height:200px;width:auto" alt="Property Image"></a>
								<span class="btn btn-warning btn-sale" v-if="room.tno == 101">出售</span>
								<span class="btn btn-warning btn-sale" v-else-if="room.tno == 102">月租</span>
							</article>
						</div>
					
					</div>
				</div>
				<ul id="pagination" class="text-center clearfix">
					<li class="disabled"><a href="#">Previous</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">Next</a></li>
				</ul>
			</div>
		</div>
	</div>
		<footer id="footer">
		</footer>
		<a href="#top" id="scroll-top"><i class="fa fa-angle-up"></i></a>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/jquery.migrate.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="plugins/slick-nav/jquery.slicknav.min.js"></script>
		<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
		<script src="plugins/forms/jquery.form.min.js"></script>
		<script src="plugins/forms/jquery.validate.min.js"></script>
		<script src="plugins/modernizr/modernizr.custom.js"></script>
		<script src="plugins/wow/wow.min.js"></script>
		<script src="plugins/zoom/zoom.js"></script>
		<script src="plugins/mixitup/mixitup.min.js"></script>
		<script src="assets/js/theme.js"></script>
		
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/base.js"></script>
		<script type="text/javascript" src="js/showpage.js"></script>
		<script src="js/slide.js"></script>
		
		<script type="text/javascript">
		window.onload = function(){
            $("#footer").load("footer.html");            
        }
		var rentLen = 0;
		var saleLen = 0;
		let app = new Vue ( {
	    	el: "#app",
	    	data: {
	    		rooms: [],
	    		types: [],
	    		checkLogin: false,
	    		user: {},
	    	},
	    	mounted: function ( ){
	    		axios.get("user/check" ).then (rt =>{
			    	if (rt.status == 200 && rt.data.code == 200){
			    		this.user = rt.data.data;
			    		this.checkLogin = true;
			    		return false;
			    	}
			    	this.checkLogin = false;
		    	})
		    	axios.post( "room/finds", qs.stringify({status: 1}) ).then (rt =>{
			    	if (rt.status == 200){
			    		this.rooms = rt.data.data;
						
				    	return false;
			    	}
		    	})
		    			    	
	    	},
	    	methods: {
	    		out: function(){
	    			axios.get("user/out" ).then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		this.user = [];
				    		this.checkLogin = false;
				    		return false;
				    	}
				    	this.user = [];
				    	this.checkLogin = false;
			    	})
	    		}
	    	}
	    })
		function views(x){
			$(".layout-item-wrap").removeClass("col-xs-4 col-xs-6 col-md-4 col-sm-6");
			$(".layout-item-wrap >article").removeClass("list-style");
			$(".fa").removeClass("selected");
			if(x == 4){
				$(".fa-th").addClass("selected");
				$(".layout-item-wrap").addClass("col-xs-4");
				return;
			}
			if(x == 6){
				$(".fa-th-large").addClass("selected");
				$(".layout-item-wrap").addClass("col-xs-6");
				return;
			}
		}
		</script>
	</body>
</html>
